<template>
	<view class="withdrawal">
		<view class="top-content">
			<view class="nav-bar">
				<view class="nav-bar-sider">
					<u-icon name="arrow-left" @click="back"></u-icon>
				</view>
				<view class="u-flex-1">
					现金提现
				</view>
				<view class="nav-bar-sider"></view>
			</view>
			
		</view>
		<view class="w-card u-flex">
			提现至：{{accountBank}}
			<view class="hui">
				(尾号{{card || '暂无'}})
			</view>
		</view>
		<view class="hui form-box">
			<view class="u-font-24" style="margin-bottom: 40rpx;">
				可提金额：{{availableAmount}}元
			</view>
			<view class="u-flex">
				<view class="yuan">
					￥
				</view>
				<view class="u-flex-1">
					<u-input v-model="amount" type="number" placeholder="请输入提现金额"/>
				</view>
				
			</view>
		</view>
		<u-button style="margin: 300rpx 50rpx 0 50rpx;" type="primary" shape="circle" @click="merchantWithdraw">立即提现</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid: '',
				availableAmount: 0,
				accountBank: '',
				amount: '',
				card: ''
			}
		},
		onLoad() {
			this.mid = uni.getStorageSync('mid');
			this.getInfo()
			this.getMerchantBalance()
		},
		methods: {
			back() {
				uni.reLaunch({
				    url: './index'
				});
			},
			// 获取账户现金余额
			getMerchantBalance() {
				this.$u.api.getMerchantBalance({mid: this.mid}).then(res=>{
					if(res.code == 0){
						this.availableAmount = res.data.availableAmount
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			getInfo() {
				this.$u.api.getMerchantInfo().then(res=>{
					if(res.code == 0){
						this.accountBank = res.data.accountBank
						this.card = res.data.accountNumber.substring( res.data.accountNumber.length-4)
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			merchantWithdraw() {
				if (+this.amount > +this.availableAmount) {
					uni.showToast({
						icon:'none',
						title: '账号余额不足'
					});
					return
				}
				this.$u.api.postMerchantWithdraw({
					amount: this.amount,
					mid: this.mid
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							icon:'none',
							title: '提现成功'
						});
						this.availableAmount = (this.availableAmount * 100 - this.amount * 100)/100;
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.withdrawal {
		
	}
	.hui {
		color: #999999;
	}
	.u-font-24 {
		font-size: 24rpx;
	}
	
	.top-content {
		position: relative;
		width: 100%;
		height: 334rpx;
		background-color: #1F6ECF;
		background-image: url('@/static/my/bg-tixian.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.nav-bar {
		display: flex;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
	}
	.nav-bar-sider {
		width: 100rpx;
	}
	.w-card {
		margin: -118rpx 30rpx 0 30rpx;
		z-index: 3;
		position: relative;
		padding: 50rpx 30rpx 40rpx 30rpx;
		height: 120rpx;
		/* border-bottom: 1rpx dotted; */
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	.form-box {
		margin: 2rpx 30rpx 0 30rpx; 
		padding: 51rpx 37rpx 30rpx 37rpx;
		border-top: 1rpx solid #E6E6E6;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.yuan {
		font-size: 48rpx;
		color: #333333;
	}
</style>
